// 轮播图
class Banner {
    constructor (ele) {
      // 1. 范围元素
      this.ele = document.querySelector(ele)
      // 2. imgBox
      this.imgBox = this.ele.querySelector('.imgBox')
      // 3. pointBox
      this.pointBox = this.ele.querySelector('.pointBox')
      // 4. leftRightBox
      this.leftRightBox = this.ele.querySelector('.leftRightBox')
      // 5. 索引
      this.index = 0
      // 6. 定时器返回值
      this.timer = 0
  
      // 直接启动入口函数
      this.init()
    }
  
    // 1. 入口函数
    init () {
    //   this.setPoint()
      this.autoPlay()
      this.overOut()
      this.leftRight()
      this.pointEvent()
      this.changePage()
    }
  
    // 2. 设置焦点
    // setPoint () {
    //   const pointNum = this.imgBox.children.length
  
    //   const frg = document.createDocumentFragment()
    //   for (let i = 0; i < pointNum; i++) {
    //     const li = document.createElement('li')
    //     if (i === 0) li.className = 'active'
    //     li.setAttribute('i', i)
    //     frg.appendChild(li)
    //   }
  
    //   this.pointBox.appendChild(frg)
    // //   this.pointBox.style.width = pointNum * 20 * 1.5 + 'px'
    // }
  
    // 3. 切换一张
    changeOne (type) {
      // 3-1. 让当前这一张消失
      // 此时 this.index === 0
      this.imgBox.children[this.index].classList.remove('active')
      // 3-4. 焦点同时联动
      this.pointBox.children[this.index].classList.remove('active')
  
      // 3-2. 修改 index 为 n
      if (type === true) {
        this.index++
      } else if (type === false) {
        this.index--
      } else {
        this.index = type
      }
  
      // 4-3. 调整一下 index
      if (this.index >= this.imgBox.children.length) this.index = 0
      if (this.index < 0) this.index = this.imgBox.children.length - 1
  
      // 3-3. 让当前这一张显示
      // 此时 this.index 就是传递进来的 n
      this.imgBox.children[this.index].classList.add('active')
      // 3-4. 焦点同时联动
      this.pointBox.children[this.index].classList.add('active')
    }
  
    // 4. 自动轮播
    autoPlay () {
      // 4-1. 开启定时器
      this.timer = setInterval(() => {
        // 4-2. 切换到下一张
        this.changeOne(true)
      }, 4000)
    }
  
    // 5. 移入移出
    overOut () {
      this.ele.addEventListener('mouseover', () => clearInterval(this.timer))
      this.ele.addEventListener('mouseout', () => this.autoPlay())
    }
  
    // 6. 左右切换
    leftRight () {
      this.leftRightBox.addEventListener('click', e => {
        e = e || window.event
        const target = e.target || e.srcElement
  
        if (target.className === 'left') {
          this.changeOne(false)
        }
  
        if (target.className === 'right') {
          this.changeOne(true)
        }
      })
    }
  
    // 7. 焦点切换
    pointEvent () {
      this.pointBox.addEventListener('mouseover', e => {
        e = e || window.event
        const target = e.target || e.srcElement
  
        if (target.nodeName === 'LI') {
          const i = target.getAttribute('i') - 0
          this.changeOne(i)
        }
      })
    }
  
    // 8. 切换页面
    changePage () {
      document.addEventListener('visibilitychange', () => {
        const state = document.visibilityState
  
        if (state === 'hidden') clearInterval(this.timer)
        if (state === 'visible') this.autoPlay()
      })
    }
  }
// 计时器
$(function(){

  var setTimer = null;
var chazhi = 0;
//差值计算
//例子(模拟)
// chazhi = 20 * 86400000;
//真实时间(注意月份需减掉1，否则时间会计算错误)
//chazhi = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
chazhi = (new Date(2020,12-1,16,20,0,0)) - (new Date());

//执行函数部分
countFunc(chazhi);
setTimer = setInterval(function() {
chazhi = chazhi - 1000;
countFunc(chazhi);
}, 1000);
function countFunc(leftTime) {
if(leftTime >= 0) {
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数 
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时 
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟 
var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数 
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
$(".joind").html(days);
$(".joinh").html(hours);
$(".joinm").html(minutes);
$(".joins").html(seconds);
} else {
clearInterval(setTimer);
$(".joind").html("00");
$(".joinh").html("00");
$(".joinm").html("00");
$(".joins").html("00");
}
}
function checkTime(i) { //将0-9的数字前面加上0，例1变为01 
if(i < 10) {
i = "0" + i;
}
return i;
}
})
console.log('test')
// 登录登出
$(function(){
    const nickname = getCookie('nickname')
    // console.log(nickname)
    if(nickname){
      $('.off').addClass('hide')
      $('.bind-off').addClass('hide')
      $('.qq-off').addClass('hide')
      $('.on').removeClass('hide').html(`欢迎您，${nickname} &nbsp;&nbsp;<a href='' title="登录">退出</a>`)
      $('.qq-on').removeClass('hide').html(`<img src="../img/list/zb-list.jpg" alt="" class="lf">
      <p>
      ${nickname}
      </p>`)
      $('.bind-on').removeClass('hide')
      $('.on > a').on('click',function(){setCookie('nickname',nickname,-1);console.log('11')})

      // 购物车
      setCartNum()
    }else{
      $('.bind-on').addClass('hide')
      $('.bind-off').removeClass('hide')
      $('.on').addClass('hide')
      $('.qq-on').addClass('hide')
      $('.off').removeClass('hide')
      $('.qq-off').removeClass('hide')
    }

    // 购物车
    function setCartNum() {
      // 拿到 localStorage 里面的那个数组
      
      const cart = JSON.parse(window.localStorage.getItem('cart')) || []
      // 3-2. 判断 cart 是一个 [], 那么就用 0 填充到指定位置
      if (!cart.length) {
        $('.car-Num').html('0')
        return
      }
    
      // 3-3. 能来到这里, 表示购物车里面有数据
      // 需要把每一条数据的 cartNum 叠加咋一起
      let count = 0
      cart.forEach(item => count += item.cart_number - 0)
      
      console.log($('.car-Num'))
      $('.car-Num').html(count)
    }




})
// 搜索框
$(function(){
  $('.inputbox > input').on({
    focus:()=>{
      console.log('11')
      $('.inputbox > input').attr('value','')
    },
    blur:()=>{ console.log('ss')
    $('.inputbox > input').attr('value','请输入搜索内容')}
  })
})


$(function(){
  $('.top1').on('click','.game_menu',function(){
    $('.downList').slideToggle(500)
  })
})
